* {
    margin:0px;
    padding: 0px;
}
img {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
body {
    width:1000px;
    margin:auto;
    font: 12px/1.5 Tahoma, "宋体", Arial, Helvetica, sans-serif;
}
ul {
    list-style:none;
}
html {
    font-size:16px;
    color:#000;
}
.box {
    padding:1em;
    border: 1px solid #d2d2d2;
    background-color: #f9f7f4;
    margin:2em 1em;
    position:relative;
}
.box h2 {
    font-size:1.2em;
    margin-bottom:2em;
}
.box > section {		
    position:relative;
    left:20%;
    width:calc(80% - 2em);			
}
.mask {
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    background-color: white;
    z-index:1;
    opacity:0;
    display: none;
}
.selectPic {
    margin-bottom:1em;
}
.selectPic > span:first-child {
    position:absolute;
    left:-6em;
    top:0px;
}
.selectPic > span:nth-child(2) {
    position:relative;
    display:block;
    width: 15em;
    border:1px solid gray;	
    padding-left: 0.4em;	
    border-radius: 0.2em;	
    background:white;
    cursor: pointer;
}
.selectPic > span:nth-child(2):hover {
    border: 1px solid #508cf9;
}
.selectPic > span:nth-child(2)::after {
    content: '';
    position:absolute;
    right:0.4em;
    top:0.4em;
    width:0.4em;
    height:0.4em;
    background-image:linear-gradient(45deg, transparent 50%, #a6a6a6 0);
    transform:rotate(135deg);
}
.selectPic > ul {
    position:absolute;
    left:0px;
    width:15em;
    display:inline-block;
    z-index:1;
    background-color:white;
    border:1px solid gray;
    display:none;
}
.selectPic > ul > li {
    cursor: pointer;
    padding-left: 0.4em;
}
.selectPic > ul > li:hover {
    background-color:#366dd1;
    color: white;
}
.checkPic {
    margin-bottom: 1em;
    overflow:hidden;
}
.checkPic::after {
    content:'';
    clear:both;
}
.checkPic > span {
    position:absolute;
    left:-6em;
}
.imgDetails > li {
    float:left;
    width: calc(33.33% - 1em);
    padding-right:1.5em;
    margin-bottom:1em;
    position:relative;
    height: 7em;
    overflow:hidden;
    box-sizing:border-box;
    cursor:pointer;
}
.imgDetails > li:nth-child(3n) {
    padding-right:0;
}
.imgDetails > li input[type='checkbox']{
    position:absolute;
    clip:rect(0, 0, 0, 0);
}

.imgDetails > li input[type='checkbox'] + div::after{
    content: '\a0';
}
.imgDetails > li input[type='checkbox']:checked + div::after{
    position:absolute;
    content: '\2713';
    left:0.25em;
    top:0.25em;
    width:1.5em;
    background-color:rgb(255, 255, 255);
    box-shadow: inset 0px 0px 0.25em gray;
    color: green;
    text-align:center;
    line-height: 1.5em;
    
}
.imgDetails > li input[type='checkbox'] + div{
    position:relative;
    box-sizing: border-box;
    width:100%;
    height: 7em;
    background:white;
}
.imgDetails > li input[type='checkbox'] + div > img {
    box-sizing: border-box;
    width:100%;
    height:100%;
    cursor: pointer;
}
.imgDetails > li input[type='checkbox']:checked + div > img {
    border: 2px solid #508cf9;
}
.selected {
    position:relative;
    margin-bottom:1em;
    clear:both;
}
.selected > span {
    position:absolute;
    left:-6em;
    top:0em;
}
.selected > div {
    overflow: hidden;
    
}
.imgShow > li {
    float: left;
    width: 6em;
    height: 4em;
    margin-right: 1em;
    position:relative;
    margin-bottom: 0.5em;
    background:white;
}
.imgShow > li::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    position:absolute;
    left:0;
    top: 0;
}
.imgShow > li:hover::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position:absolute;
    left:0;
    top: 0;
}
.imgShow > li > img {
    height: 100%;
    width: 100%;
}
.pages {
    clear: both;
    margin-bottom:1em;
    cursor: pointer;
}
.pages > span {
    padding: 0.3em 1.7em;
    display:inline-block;
    background:#366dd1;
    color: white;
    border-radius: 0.25em;
    margin-right: 1em;
    cursor:pointer;
}
.pages > span:first-child {
    opacity:0.7;
}

.submit {
    text-align:center;
    margin-bottom:1em;
}
.submit > span {
    display:inline-block;
    padding:0.3em 2em;
    background:#508cf9;
    margin-left: 1em;
    cursor: pointer;
    color: white;
    border-radius:0.25em;
}
.submit > span:hover {				
    border-bottom:none;
    border-right:none;
}
.active {
    display:block!important;
}
#prev,#next {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}